<template>
  <div class="clientType">
    <div class="title-container">
      <div class="left-box">
        <el-form ref="form" :model="searchForm" :inline="true" class="formClass">
          <el-form-item>
            <el-input
              prefix-icon="el-icon-search"
              type="input"
              placeholder="请输入客户名称"
              v-model="searchForm.customerName"
              @clear="clearSearch"
              clearable
              style="margin-right: 10px;"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <global-card>
      <template #leftTitle>
        <el-button type="success" icon="el-icon-refresh" @click="refresh">刷新</el-button>
      </template>
      <template #content>
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          style="width: 100%"
          class="elTable"
        >
          <el-table-column type="index" label="序号" width="80" align="center"/>
          <el-table-column prop="customerCode" label="客户编码" align="center"/>
          <el-table-column prop="customerName" label="客户名称" align="center"/>
          <el-table-column prop="customerPhone" label="客户手机号" align="center"/>
          <el-table-column prop="orderCode" label="订单编号" align="center"/>
          <el-table-column prop="housekeeperName" label="服务管家" align="center"/>
          <el-table-column prop="deliveryMethod" label="配送状态" align="center">
            <template slot-scope="scope">
              {{ resrveProductTypeData[scope.row.deliveryMethod].name }}
            </template>
          </el-table-column>
          <el-table-column prop="orderAmount" label="订单总价" align="center"/>
          <el-table-column prop="orderDiscount" label="折扣金额" align="center"/>
          <el-table-column prop="actuallyAmount" label="实付金额" align="center"/>
          <el-table-column prop="" label="支付状态 " align="center">
            <template slot-scope="scope">
              {{ orderStatusData[scope.row.payStatus].name }}
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center"/>
          <el-table-column prop="createTime" label="支付时间" align="center"/>
          <el-table-column label="操作" width="140" align="center">
            <template #default="{ row }">
              <!--              <perButton v-if="row.payStatus==0" label="确认付款" type="warning" size="mini" perms="PROTOCOL_EDIT"-->
              <!--                         @click="newCompanyClick(row, '确认付款')"></perButton>-->
              <perButton label="查看明细" type="primary" size="mini" perms="PROTOCOL_EDIT"
                         @click="newCompanyClick(row, '查看明细')"></perButton>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template #footer>
        <pagination
          class="pagination"
          :total="count"
          :page.sync="pageIndex"
          :limit.sync="pageSize"
          @pagination="pagination"
        />
      </template>
    </global-card>

    <!-- 新增编辑 -->
    <yc-dialog
      ref="ycDialog"
      dialogWidth="60%"
      :dialogTitle="dialogTitle"
      :centerTitle="dialogCenterTitle"
      :show-center="false"
    >
      <template #content>
        <div class="dialog-content">
          <div class="d-flex align-center mb-3">
            <div class="my_line"></div>
            <div class="my_title">订单基本信息</div>
          </div>
          <el-row class="mb-2" :gutter="20">
            <el-col :span="8">
              <div class="d-flex">
                <div class="orderTitle">订单编号：</div>
                <div class="orderValue">{{mxObject.orderCode}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="d-flex">
                <div class="orderTitle">订单总价：</div>
                <div class="orderValue">{{mxObject.orderAmount}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="d-flex">
                <div class="orderTitle">客户名称：</div>
                <div class="orderValue">{{mxObject.customerName}}</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="mb-4" :gutter="20">
            <el-col :span="8">
              <div class="d-flex">
                <div class="orderTitle">客户编码：</div>
                <div class="orderValue">{{mxObject.customerCode}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="d-flex">
                <div class="orderTitle">{{itemTableData.payStatus==0?"订单优惠": "优惠金额"}}：</div>
                <div class="orderValue">{{mxObject.orderDiscount}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="d-flex">
                <div class="orderTitle">创建时间：</div>
                <div class="orderValue">{{mxObject.createTime}}</div>
              </div>
            </el-col>
          </el-row>

          <template v-if="mxObject.addressCode">
            <div class="d-flex align-center mb-3">
              <div class="my_line"></div>
              <div class="my_title">地址基本信息</div>
            </div>
            <el-row class="mb-2" :gutter="20">
              <el-col :span="12">
                <div class="d-flex">
                  <div class="orderTitle">姓名：</div>
                  <div class="orderValue">{{mxObject.receiverName}}</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="d-flex">
                  <div class="orderTitle">省市区：</div>
                  <div class="orderValue">{{mxObject.receiverArea}}</div>
                </div>
              </el-col>
            </el-row>
            <el-row class="mb-4" :gutter="20">
              <el-col :span="12">
                <div class="d-flex">
                  <div class="orderTitle">手机号：</div>
                  <div class="orderValue">{{mxObject.receiverPhone}}</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="d-flex">
                  <div class="orderTitle">详细地址：</div>
                  <div class="orderValue">{{mxObject.detailAdress}}</div>
                </div>
              </el-col>
            </el-row>
          </template>

          <div class="d-flex align-center mb-3">
            <div class="my_line"></div>
            <div class="my_title">订单明细列表</div>
          </div>
          <el-table
            :data="mxData"
            border
            style="width: 100%;"
          >
            <el-table-column type="index" label="序号" width="80" align="center"/>
            <el-table-column prop="productCode" label="商品编码" align="center"/>
            <el-table-column prop="productName" label="商品名称" align="center"/>
            <el-table-column prop="itemAmout" label="商品单价" align="center"/>
            <el-table-column prop="stock" label="商品数量" align="center"/>
          </el-table>
          <div class="d-flex mt-3">
            <div class="orderTitle2">本次实付金额：</div>
            <div class="orderValue2">{{mxObject.actuallyAmount}}</div>
          </div>
        </div>
      </template>
      <template #footer>
        <!--        <el-button v-if="itemTableData.payStatus==0" type="primary" :loading="addOrUpdateLoading" @click="dialogSave">余额付款</el-button>-->
        <el-button @click="$refs.ycDialog.dialogVisible = false">取消
        </el-button>
      </template>
    </yc-dialog>

    <global-message
      v-if="isGlobalMessageShow"
      @receive="receive"
      :message="message"
    />
  </div>
</template>

<script>
  import ycDialog from "@/components/pageDialog"
  import perButton from "@/components/permissionButton"
  import {
    queryPage,
    balancePayment
  } from "@/api/orderSettlementManagement/orderSettlement"
  import { queryAccountList } from "@/api/appUserControl/account"
  import { getToken } from "@/utils/auth"
  import { queryOrderList, queryOrderOne } from "@/api/majordomoManagement/majordomoInfo"

  export default {
    components: {
      ycDialog,
      perButton
    },
    data() {
      return {
        tableData: [],
        pageIndex: 1,
        pageSize: 10,
        count: 0,
        itemTableData: {},
        orderStatusData: [
          { id: 0, name: "待支付" },
          { id: 1, name: "已支付" }
        ],
        resrveProductTypeData: [
          { id: 0, name: "快递上门" },
          { id: 1, name: "到店取" }
          // { id: 2, name: "奢侈品" },
          // { id: 3, name: "私餐" },
          // { id: 4, name: "高端游" },
          // { id: 5, name: "车辆租赁" },
          // { id: 6, name: "其他商品" }
        ],
        resrveProductTypeData2: [
          { id: 0, name: "豪华车" },
          { id: 1, name: "家政服务" },
          { id: 2, name: "奢侈品" },
          { id: 3, name: "私餐" },
          { id: 4, name: "高端游" },
          { id: 5, name: "车辆租赁" },
          { id: 6, name: "其他商品" }
        ],
        searchForm: {
          customerName: "",

        },

        detailsDisabled: false,
        isGlobalMessageShow: false,

        dialogCenterTitle: "",
        dialogTitle: "",
        message: "",

        loading: false,
        mxData: [],
        mxObject: {},


        addOrUpdateLoading: false
      }
    },
    created() {
      this.getData()
    },
    methods: {
      async searchClick() {
        this.getData()
      },
      clearSearch() {
        this.getData()
      },
      async getData() {
        const { customerName } = this.searchForm
        this.loading = true
        const data = await queryPage({
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
          orderType: 1,
          customerName
        })
        this.tableData = data.object.data
        this.count = data.object.count
        this.loading = false
      },
      pagination(pageItem) {
        this.getData(pageItem.page, pageItem.limit)
      },


      // 确认付款
      newCompanyClick(row, name) {
        this.dialogTitle = name

        this.itemTableData = row
        this.queryOrderOne()
        this.queryOrderList()

        this.$refs.ycDialog.dialogVisible = true
      },

      async queryOrderOne() {
        const data = await queryOrderOne({
          orderCode: this.itemTableData.orderCode
        })
        this.mxObject = data.object
      },
      async queryOrderList() {
        const data = await queryOrderList({
          orderCode: this.itemTableData.orderCode
        })
        this.mxData = data.object
      },

      dialogSave() {
        this.$confirm("是否确认余额付款?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.addOrUpdateLoading = true
          const { status, message } = balancePayment({
            orderCode: this.itemTableData.orderCode,
            actionType: 2
          })
          if (status == "200") {
            this.$message({
              message: message,
              type: "success"
            })
            this.getData()
            this.$refs.ycDialog.dialogVisible = false
          }
          this.addOrUpdateLoading = false
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          })
        })
      },

      receive() {
        this.isGlobalMessageShow = false
      },

      refresh() {
        this.searchForm = {
          agreementName: "",
          agreementType: ""
        }
        this.getData()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .clientType {
    .title-container {
      display: flex;
      justify-content: flex-end;
      margin-right: 20px;

      .left-box {
        display: flex;

        .formClass {
          /*display: flex;*/
          /*margin-right: 20px;*/

          .el-form-item {
            margin-top: 20px;
            margin-bottom: 0;

            .el-input {
              width: 216px;
            }

            .el-select {
              width: 171px;
              margin-left: 10px;
            }

            .el-date-editor {
              width: 336px;
              margin-left: 10px;
            }
          }
        }

        /*.el-button {*/
        /*  // width: 42px;*/
        /*  height: 36px;*/
        /*  margin-top: 20px;*/
        /*}*/
      }
    }
  }

  .editor-container {
    pointer-events: none;
    background-color: #C0C4CC !important;
    color: #C0C4CC !important;
  }

  .orderTitle {
    font-family: PingFang SC;
    font-size: 16px;
    font-weight: 400;
    line-height: 19.6px;
    color: #333;
  }

  .orderValue {
    font-family: PingFang SC;
    font-size: 16px;
    font-weight: 400;
    line-height: 19.6px;
    color: #666;
  }

  .orderTitle2 {
    font-family: PingFang SC;
    font-size: 16px;
    font-weight: 500;
    line-height: 19.6px;
    color: #333;
  }

  .orderValue2 {
    font-family: PingFang SC;
    font-size: 18px;
    font-weight: 600;
    line-height: 19.6px;
    color: #666;
  }

  .my_line {
    width: 4px;
    height: 20px;
    background-color: #3276ff;
    margin-right: 10px;
    border-radius: 4px;
  }

  .my_title {
    font-family: Source Han Sans CN;
    font-size: 18px;
    font-weight: 600;
  }
</style>
